<template>
  <div class="my-theme">
    <pl-button label="label"></pl-button>
    <pl-button>BUTTON</pl-button>

    <h4>状态</h4>
    <pl-button
      v-for="item in ['primary', 'success', 'warn', 'error', 'info']"
      :key="item"
      :status="item"
      :label="item"
    ></pl-button>

    <!-- 用户自定义的组件，也能够适配主题 -->
    <pl-my-card
      v-for="item in ['primary', 'success', 'warn', 'error', 'info']"
      :key="item"
      :status="item"
      :label="item"
    >
    </pl-my-card>
  </div>

  <div class="theme-blue">
    <pl-button label="label"></pl-button>
    <pl-button>BUTTON</pl-button>

    <h4>状态</h4>
    <pl-button
      v-for="item in ['primary', 'success', 'warn', 'error', 'info']"
      :key="item"
      :status="item"
      :label="item"
    ></pl-button>
  </div>

  <div class="theme-violet">
    <pl-button label="label"></pl-button>
    <pl-button>BUTTON</pl-button>

    <h4>状态</h4>
    <pl-button
      v-for="item in ['primary', 'success', 'warn', 'error', 'info']"
      :key="item"
      :status="item"
      :label="item"
    ></pl-button>
  </div>
  <!-- <h4>Input</h4>
  <pl-input></pl-input>
  <pl-input status="error" ref="myInput"></pl-input>
  <button @click="outerFocus">outerFocus</button> -->
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import { Input } from 'v3-components-mao'

export default defineComponent({
  name: 'App',
  components: {},
  setup() {
    // const inputRef = Input.use.ref('myTnput')
    const inputRef = Input.use.ref('myInput')

    return {
      outerFocus() {
        inputRef.value!.methods.focus(false)
      }
    }
  }
})
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
